<template>
  <div class="release">
    <nav>
      <div class="back" @click="back">
        <img src="../../assets/img/Mall/icon/返回.svg" alt="" />
      </div>
      <div class="title"></div>
      <div>
        <div class="submit" @click="submit">发布</div>
      </div>
    </nav>
    <div class="goods-info">
      <div>      
          <img src="../../assets/img/Mall/release/商品.svg" alt="" />
          <input type="text" v-model="goodName" placeholder="商品名称(最长8个字符)" maxlength="8"/>
      </div>
      <div>       
          <img src="../../assets/img/Mall/release/描述.svg" alt="">
          <input type="text" v-model="goodInfo" placeholder="商品描述" maxlength="30"/>      
      </div>
      <div>
        <img src="../../assets/img/Mall/release/价格.svg" alt="">
        <input type="text" v-model="price" placeholder="商品价格" maxlength="4"/>
      </div>
      <div>
        <img src="../../assets/img/Mall/release/地址.svg" alt="">
        <input type="text" v-model="address" placeholder="卖家地址" maxlength="20"/>
      </div>
      <div>
        
        <select name="type" id="type" v-model="type">
          <option value="book">书籍</option>
          <option value="computer">电脑</option>
          <option value="phone">手机</option>
          <option value="washing">洗衣机</option>
          <option value="socks">袜子</option>
          <option value="toothbrush">牙刷</option>
          <option value="other">其他</option>
        </select>
      </div>
    </div>
    <div class="upload">
      <label for="img">
        <img src="../../assets/img/Mall/release/tianjiazengjiajia.svg" alt="" />
      </label>
      <input
        type="file"
        name="photos"
        id="img"
        multiple="multiple"
        accept="image/jpg,image/jpeg,image/png,image/svg"
        @change="getfile($event)"
      />
      <div class="show-img">
        <div class="show-img-item" v-for="(item, index) in img">
          <img :src="item" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      goodName: "",
      goodInfo: "",
      price: null,
      address: "",
      type: "",
      img: []
    };
  },
  computed: {
    uid() {
      return (
        (this.$store.getters.user&&this.$store.getters.user._id) ||
        (localStorage.getItem("userInfo")&&JSON.parse(localStorage.getItem("userInfo"))._id)||
        ''
      );
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    getfile(e) {
      if (!this.uid) {
        return alert("请先登录");
      } else {
        let formData = new FormData();
        let file = e.target.files[0];
        // console.log(file);
        if (!file) {
          return alert("请选择照片");
        }
        formData.append("file", file);
        this.$axios({
          url: "/upload/goods",
          method: "post",
          data: formData
        }).then(res => {
          // console.log(res.data);
          this.img.push(res.data);
        });
      }
    },
    submit() {
      if (!this.uid) {
        return alert("登录后可发布商品");
      }else if(this.goodName ==''){
        return alert('商品名称不能为空')
      }
      let data = {
        goodName: this.goodName,
        goodInfo: this.goodInfo,
        price: this.price,
        address: this.address,
        _id: this.uid,
        type: this.type,
        img: this.img
      };
      this.$axios({
        url: "mall/submit",
        method: "post",
        data: data
      }).then(res => {
        alert(res.data.msg);
        this.goodName = "";
        this.goodInfo = "";
        this.price = "";
        this.address = "";
        this.type = "";
        this.img = [];
        this.$router.go(-1);
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.release {
  padding: 5px 10px 40px 10px;
}
nav {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 44px;
  /* border-bottom: 1px solid rgb(187, 184, 184); */
  display: flex;
}
.back {
  width: 50px;
  border-radius: 12px;
  padding-top: 5px;
}
.title {
  flex: 1;
}
.submit {
  width: 50px;
  height: 40px;
  background-color: orange;
  border-radius: 20px;
}
.goods-info{
  padding-top: 20px;
}
.goods-info div {

  display: flex;
  margin-top: 10px;
}
.goods-info input {
  font-size: 18px;
  border: 0;
  border-bottom: 1px solid #999;
  width: 100%;
  padding: 5px 5px;
}
#type {
  width: 30%;
  height: 40px;
  margin: 0;
  border: 0;
  text-align: center;
  text-align-last: center;
}
#type option {
  text-align: center;
}
.upload input {
  display: none;
}
label {
  width: 50px;
  height: 50px;
  display: block;
  margin-top: 10px;
  margin-left: 10px;
}
label img {
  width: 100%;
  height: 100%;
}
.show-img {
  display: flex;
  overflow-x: scroll;
  margin-top: 10px;
}
.show-img-item {
  flex: 1;
}
.show-img-item img {
  width: 100%;
  height: 100%;
}
button {
  width: 200px;
}
</style>
